<template>
	<view class="container">
		<HeadNav title="产品列表" back />
		<view class="search-bar">
			<input v-if="showSearchInput" focus class="input-bar-input" v-model.trim="pagination.keywords"
				@confirm="onSearch" confirm-type="search" @blur="blurHandle" />
			<view class="input-bar-show" v-else @tap="inputbarClick">
				<uni-icons type="search" size="23" color="#FFF"></uni-icons>
				<text class="input-bar-showtext">搜索</text>
			</view>
		</view>
		<view class="filter-bar">
			<!-- <view class="select-box">
				<uni-data-select placeholder="种类" v-model="selectVal" :localdata="range" @change="selectChange"
					:clear="false"></uni-data-select>
			</view> -->
			<view class="btn-filter" :class="{active: packtypeActive === packtypeIndex}"
				v-for="(packtype, packtypeIndex) of packtypeList" :key="packtype.dictCode"
				@tap="selectPacktype(packtype.dictValue, packtypeIndex)">
				{{packtype.dictLabel}}
			</view>
			<!-- <view class="btn-filter">
				补充包
			</view> -->
			<!-- <view class="btn-filter">
				卡牌周边
			</view> -->
			<!-- <view class="btn-filter">
				其他产品
			</view> -->
		</view>
		<scroll-view scroll-y class="product-list-height" @scrolltolower="getData">
			<view class="product-list">
				<view class="product-item" @tap="redirectFunc(item.id)" v-for="item of dataList" :key="item.id">
					<image v-if="item.fileUrl" class="product-item-img" :src="item.fileUrl">
					</image>
					<view v-else class="product-item-img no-image"></view>
					<view class="product-item-bottom">
						<view class="product-item-date">
							发售日期：{{ formatDate(item.saleTime, 'YYYY年MM月DD日') }}
						</view>
						<view class="product-item-name">
							{{item.packName}}
						</view>
					</view>
				</view>
				<!-- <view class="product-item" @tap="redirectFunc">
				<image class="product-item-img" src="@/static/images/product1.png"></image>
				<view class="product-item-bottom">
					<view class="product-item-date">
						发售日期：2025年12月12日
					</view>
					<view class="product-item-name">
						产品名称
					</view>
				</view>
			</view> -->

			</view>
			<uni-load-more v-if="showLoadMore" :status="pagination.loadingStatus" />
		</scroll-view>

	</view>

</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShareAppMessage
	} from '@dcloudio/uni-app'
	import HeadNav from '@/components/HeadNav'
	import {
		getProductList
	} from '@/api/product'
	import {
		dictionaryApi
	} from '@/api/common'
	import {
		formatDate
	} from '@/utils/formatTime'
	const showSearchInput = ref(false)
	const pagination = reactive({
		page: 0,
		size: 10,
		keywords: '',
		loadingStatus: '',
		pageLimit: false,
		packType: '1'
	})
	// const selectVal = ref('')
	// const range = ref([{
	// 	value: 0,
	// 	text: '全部'
	// }, {
	// 	value: 1,
	// 	text: '种类1'
	// }, {
	// 	value: 2,
	// 	text: '种类2'
	// }])
	const dataList = ref([]);
	const packtypeList = ref([]);
	const packtypeActive = ref(0)
	const showLoadMore = ref(true)

	onLoad(() => {
		getData()
		getDictionary()
	})

	const getDictionary = async () => {
		const res = await dictionaryApi('pack_type_dict')
		packtypeList.value = res.data
	}

	const getData = async () => {
		if (pagination.pageLimit) return
		pagination.page++

		const params = {
			pageNum: pagination.page,
			pageSize: pagination.size,
			packType: pagination.packType
		}

		if (pagination.keywords) params.packName = pagination.keywords

		showLoadMore.value = true
		pagination.loadingStatus = 'loading'
		pagination.pageLimit = true

		try {
			const res = await getProductList(params);
			dataList.value = dataList.value.concat(res.rows);

			if (dataList.value.length === 0) {
				// 查不到数据
				pagination.pageLimit = true
				pagination.loadingStatus = 'noMore'
			} else if (pagination.page * pagination.size >= res.total) {
				pagination.pageLimit = true
				showLoadMore.value = false
			} else {
				pagination.loadingStatus = 'more'
				pagination.pageLimit = false
			}

		} catch (error) {
			console.log(error)
			pagination.pageLimit = false
			uni.showToast({
				title: '查询产品数据失败，请稍后再试',
				icon: 'error'
			})

		}
	}

	const selectPacktype = (value, index) => {
		pagination.packType = value
		packtypeActive.value = index
		pagination.page = 0
		pagination.pageLimit = false
		dataList.value = []
		getData()
	}

	const onSearch = () => {
		pagination.page = 0
		pagination.pageLimit = false
		pagination.packType = ''
		dataList.value = []
		getData()
	}

	const blurHandle = (event) => {
		if (event.detail.value.length === 0) {
			showSearchInput.value = false
		}

	}

	const inputbarClick = () => {
		showSearchInput.value = true

	}

	// const selectChange = () => {

	// }

	const redirectFunc = (id) => {
		uni.navigateTo({
			url: '/pages/product/detail?id=' + id
		});
	}

	onShareAppMessage(res => {
		// if (res.from === 'button') {// 来自页面内分享按钮
		//   console.log(res.target)
		// }
		return {
			title: '欢迎使用共鸣对决', // 分享标题
			path: '/pages/index/index', // 分享路径
			// imageUrl: 'https://example.com/image.png', // 分享图标
		}
	})
</script>

<style lang="scss" scoped>
	.container {
		background-color: #F0F0EE;
		padding-bottom: env(safe-area-inset-bottom);
		min-height: 100vh;
		box-sizing: border-box;
	}

	.search-bar {
		padding: 24rpx;
		// background-color: #45463A;
		background: url('https://ucp-tcg.com:18001/mc/app/static/d_bg.png');
  background-repeat: repeat-x;
		color: #fff;
		font-family: PingFangSC-Regular, sans-serif;
		font-size: 32rpx;

		.input-bar-show {
			height: 72rpx;
			display: flex;
			width: 100%;
			justify-content: center;
			align-items: center;
			background-color: #FFFFFF4D;
			border-radius: 12rpx;

			.input-bar-showtext {
				line-height: 48rpx;
				margin-left: 8rpx;
				letter-spacing: 2rpx;
			}
		}

		.input-bar-input {
			height: 72rpx;
			background-color: #FFFFFF4D;
			border-radius: 12rpx;
			padding-left: 16rpx;
		}
	}

	.filter-bar {
		padding: 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-family: PingFangSC-Regular, sans-serif;

		.select-box {
			width: 284rpx;
		}

		.btn-filter {
			background-color: #F1F1F1;
			color: #333333;
			border: 2rpx solid #FFFFFF;
			box-shadow: 0 0 12rpx #00000029;
			padding: 14rpx 0;
			width: 22.3%;
			border-radius: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			letter-spacing: 2rpx;

			&.active {
				background-color: #BB9F5E;
				border-color: #A58C52;
				color: #FFFFFF;
			}
		}
	}

	.product-list-height {
		// max-height: calc(100vh - 260rpx - env(safe-area-inset-bottom));
		max-height: 70vh;
	}

	.product-list {
		padding: 0 32rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		box-sizing: border-box;

		.product-item {
			width: 48.5%;
			font-family: PingFangSC-Regular, sans-serif;
			margin-bottom: 20rpx;
		}

		.product-item-img {
			height: 526rpx;
			width: 100%;
			border-radius: 14rpx 14rpx 0 0;

			&.no-image {
				background-color: $no-image-color;
			}
		}

		.product-item-bottom {
			padding: 12rpx 0;
			padding-left: 16rpx;
			background-color: #333333;
			border-radius: 0 0 14rpx 14rpx;

			.product-item-date {
				color: #D2CAB8;
				line-height: 34rpx;
				font-size: 24rpx;
			}

			.product-item-name {
				color: #C9AC67;
				font-size: 28rpx;
				line-height: 40rpx;
			}
		}
	}
</style>